<template>
  <div class="nav-tab">
    <router-link
      tag="div"
      :to="item.to"
      class="nav-tab-item"
      :class="{'active': activeIndex == index}"
      v-for="(item, index) of items"
      :key="index"
      @click.native="handleItemClick(index)"
    >
      <i class="iconfont nav-tab-item-icon" :class="item.icon"></i>
      <span class="nav-tab-item-label">{{item.label}}</span>
    </router-link>
    <div class="nav-tab-overlay" :style="{'left':activeIndex * 18.5 + '%'}"></div>
  </div>
</template>

<script>
export default {
  name: 'HomeFooter',
  data () {
    return {
      items: [
        {icon: 'icon-shouye', label: '首页', to: '/'},
        {icon: 'icon-biaoqianA01_fenlei-52', label: '分类', to: '/classify'},
        {icon: 'icon-faxian', label: '发现', to: '/search'},
        {icon: 'icon-wenda1', label: '问答', to: '/question'},
        {icon: 'icon-wode', label: '我的', to: '/my'}
      ],
      activeIndex: 0
    }
  },
  methods: {
    handleItemClick (index) {
      this.activeIndex = index
    }
  }
}
</script>

<style lang="stylus" scoped>
.nav-tab
  position fixed
  bottom 0
  left 0
  right 0
  background-color #f5f7fa
  height 1rem
  border-radius .2rem .2rem 0 0
  display flex
  flex-direction columns
  font-size .1rem
  .nav-tab-item
    z-index: 2
    width 18.5%
    display flex
    flex-direction column
    justify-content center
    align-items center
    padding-top 0.2rem
    transition .3s
    .nav-tab-item-icon
      transition: .3s
      font-size .5rem
      color #4298e7
    .nav-tab-item-label
      transition: .3s
      opacity 0
      color #4298e7
  .active
    width 26%
    .nav-tab-item-label
      opacity 1
    .nav-tab-item-icon
      transform translate(0, -0.1rem)
  .nav-tab-overlay
    width 26%
    height 100%
    position absolute
    left 0
    top 0
    background-color #e4f2ff
    border-radius 6px 6px 0 0
    transition .3s
</style>
